import React from "react";
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

import {
  CockpitChartBaseProps,
  echartsCockpitTheme,
} from "../helps/echartsCommon";

export const getWarningDataLineChartOption = (
  p: WarningDataLineChartProps
): EChartsOption => {
  const { dates = [], seriesMap = {} } = p;
  const keys = Reflect.ownKeys(seriesMap).map((k) => String(k));
  return {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      icon: "circle",
      itemWidth: 6,
      itemGap: 20,
      right: "5%",
      top: 10,
      textStyle: {
        fontSize: "14px",
        color: "#FEFEFE",
        opacity: 0.83,
      },
      data: keys.map((k) => seriesMap[k]),
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        fontSize: "14px",
        fontFamily: "Arial",
        color: "#FDFFFF",
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      data: dates,
    },
    yAxis: {
      type: "value",
      min: 0,
      // max: 140,
      splitNumber: 4,
      splitLine: {
        show: true,
        lineStyle: {
          color: "#00BFF3",
          opacity: 0.23,
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        margin: 20,

        fontSize: "12px",
        fontFamily: "Arial",
        color: "#FDFFFF",
      },
      axisTick: {
        show: false,
      },
    },
    series: keys.map((k) => {
      return {
        name: seriesMap[k],
        type: "line",
        // stack: '总量',
        showSymbol: false,
        data: p[k] || [],
      };
    }),
  };
};

export interface WarningDataLineChartProps
  extends CockpitChartBaseProps,
    Record<string, any> {
  /**
   *  进度
   */
  progress?: number[];

  /**
   * 质量
   */
  quality?: number[];

  /**
   * 安全
   */
  safety?: number[];
  dates?: string[];
  seriesMap?: Record<string, string>;
}
export const WarningDataLineChart = ({
  reactEChartsProps,
  progress = [],
  quality = [],
  safety = [],
  dates = [],
  seriesMap = {},
  height = "296px",
  ...rest
}: WarningDataLineChartProps) => {
  return (
    <ReactECharts
      theme={echartsCockpitTheme}
      style={{
        height: height,
      }}
      option={getWarningDataLineChartOption({
        progress,
        quality,
        safety,
        dates,
        seriesMap,
        ...rest,
      })}
      {...reactEChartsProps}
    />
  );
};
export default WarningDataLineChart;
